<template>
  <div>
    <el-dialog title="新增用户" :visible.sync="addUserFormVisible" width="50%" @close="addFormClose">
      <!-- form主体内容 -->
      <el-form :model="userForm" :rules="userFormRules" ref="userFormRef" label-width="80px">
        <el-form-item label="用户名" prop="username" size="small">
          <el-input v-model="userForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" size="small">
          <el-input v-model="userForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="邮箱号" prop="email" size="small">
          <el-input v-model="userForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="mobile" size="small">
          <el-input v-model="userForm.mobile" placeholder="请输入手机号码"></el-input>
        </el-form-item>
      </el-form>
      <!-- form底部按钮 -->
      <span slot="footer">
        <el-button @click="addUserFormVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="submitAddForm" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    //****************************************************************************验证规则通用 */
    // 验证邮箱的校验规则
    let checkEmail = (rule, value, callback) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

      if (regEmail.test(value)) {
        // 合法的邮箱
        return callback();
      }
      // 不合法的邮箱
      callback(new Error("请输入合法的邮箱"));
    };

    // 验证手机号的校验规则
    let checkMobile = (rule, value, callback) => {
      // 验证手机号的正则表达式
      const regMobile = /^1(3|4|5|6|7|8|9)\d{9}$/;

      if (regMobile.test(value)) {
        // 合法的手机号
        return callback();
      }
      // 不合法
      callback(new Error("请输入合法的手机号"));
    };
    return {
      userForm: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      userFormRules: {
        username: [
          { required: true, message: "请输入登录名称", trigger: "blur" },
          {
            min: 5,
            max: 12,
            message: "长度在 5 到 12 个字符",
            trigger: "blur",
          },
          {},
        ],
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入电子邮箱", trigger: "blur" },
          { validator: checkEmail, trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入登录名称", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" },
        ],
      },
      addUserFormVisible: false,
    };
  },
  created() {},
  methods: {
    // 显示弹出框
    showDialog() {
       this.addUserFormVisible = true;
    },
    // 监听新增用户的关闭事件重置表单
    addFormClose() {
      this.$refs.userFormRef.resetFields();
      this.addUserFormVisible = false;
    },
    //提交新增用户表单加预验证功能
    submitAddForm() {
      this.$refs.userFormRef.validate((valid) => {
        if (valid) {
          this.$axios
            .post("users", this.userForm)
            .then((res) => {
              console.log(res);
              if (res.data.meta.status == 201) {
                this.$message.success("新增用户成功");
                // 向父组件传递刷新数据
                this.$emit('refreshData',true)
                this.addUserFormVisible = false;
              } else {
                this.$message.error("新增用户失败");
              }
            })
            .catch((error) => {
              console.log(error); //cathch用于处理错误事件
            });
        } else {
          this.$message.error("预校验失败");
          return;
        }
      });
    },
  },
};
</script>
 
<style scoped>
</style>